<template>
  <div class="E-Situation">
    <Title :title="'疫情动态'">
      <template #detail>
        <div class="title-time">
          <a href="https://news.ifeng.com/c/special/7tPlDSzDgVk">
            数据来自凤凰新闻(点击前往)
          </a>
        </div>
      </template>
    </Title>

    <!-- 显示内容 v-infinite-scroll="load"-->
    <div v-if="!elSate" class="ES-body">
      <template>
        <div class="infinite-list-wrapper" style="overflow: auto;">
          <ul
            class="newsList"
            infinite-scroll-disabled="disabled"
            infinite-scroll-distance="500"
          >
            <a
              v-for="item in news"
              :key="item.base62Id"
              class="list-item"
              :href="item.url"
            >
              <NewBox :news="item"></NewBox>
            </a>
          </ul>
          <p v-if="loading" class="list-state">
            加载中
            <span id="pt">{{ point }}</span>
          </p>
          <!-- <p v-if="loading" class="list-state">加载中...</p> -->
          <p v-if="noMore" class="list-state">没有更多了</p>
        </div>
      </template>
    </div>

    <!-- 隐藏内容 -->
    <el-skeleton v-if="elSate" :rows="15" animated style="padding: 30px;" />
  </div>
</template>

<script>
export default {
  props: {
    fatherData: {
      type: Object,
    },
  },
  watch: {
    fatherData: {
      handler(newVal) {
        this.init = newVal
        this.initData()
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    // newsList() {
    //   return this.init.msg
    // },
    // 组件数据
    noMore() {
      // console.log('newsList.length', this.max)
      // console.log('this.count', this.count)
      if (this.count >= this.max) {
        window.removeEventListener('scroll', this.scollHanler)
      }
      return this.count >= this.max
    },
    disabled() {
      return this.loading || this.noMore
    },
  },
  data() {
    return {
      // 接收数据
      init: null,
      // 状态码
      state: null,
      // 是否显示
      elSate: true,
      // 新闻数组
      newsList: [],
      // 一部分新闻
      news: null,
      // 组件数据
      max: 0,
      count: 0,
      loading: false,
      point: '',
    }
  },
  methods: {
    // 初始化父组件传递过来的数据
    initData() {
      if (this.fatherData.state !== 200) {
        // 获取信息失败
        // console.log('获取信息失败')
        return (this.elSate = true)
      } else {
        this.elSate = false
        this.newsList = this.init.msg
        this.news = this.newsList.slice(0, 5)
        this.max = this.newsList.length
        this.count = this.news.length
      }
    },
    // 组件方法
    load() {
      this.loading = true
      setTimeout(() => {
        const len = this.news.length
        this.count = len + 1
        this.news.push(this.newsList[len])
        // console.log('news', this.news, 'count', this.count)
        this.loading = false
      }, 1000)
    },
    // 滚动事件
    scollHanler() {
      // 加载的时候不执行
      if (this.loading) return false
      const clientHeight = document.documentElement.clientHeight
      const scrollHeight = document.body.scrollHeight
      const scroll =
        document.documentElement.scrollTop || document.body.scrollTop
      if (scroll + clientHeight >= scrollHeight) {
        // console.log('到底部了！')
        this.load()
      }
    },
    // 点的动画
    pointAnimate() {
      let time = null
      const loading = true
      if (loading) {
        // 如果正在加载
        time = setInterval(() => {
          this.point += '.'
          if (this.point.length > 3) this.point = ''
        }, 500)
      } else {
        clearInterval(time)
      }
    },
  },
  created() {
    this.init = this.fatherData
    this.pointAnimate()
  },
  mounted() {
    window.addEventListener('scroll', this.scollHanler)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scollHanler)
  },
}
</script>

<style lang="less" scoped>
.E-Situation {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  // 标题
  .title-time {
    margin: 0 0.625rem;
    color: #888;
  }
  // 内容
  .ES-body {
    position: relative;
    padding: 0 5rem;

    // 新闻列表
    .newsList {
      margin-bottom: 100px;
      a {
        &:hover {
          color: #333;
        }
      }
    }
    // 加载状态
    .list-state {
      text-align: center;
      line-height: 50px;
      height: 50px;
      width: 100%;
      // background-color: pink;
      #pt {
        display: inline-block;
        // background-color: skyblue;
        width: 15px;
      }
    }
  }
}
</style>
